<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
canvas{position:absolute;}
canvas #canvas1{z-index:1;}
canvas #canvas2{z-index:2;top:0px;;left:0px;
display:none;}
</style>
</head>

<body onLoad="window_onload()">
<!--<canvas id="mycanvas" width="300" height="200">
	
</canvas>
<script>
	var x=document.getElementById("mycanvas")
	var cxt=x.getContext("2d")
	var qitayanse=cxt.createLinearGradient(0,0,180,50)
	qitayanse.addColorStop(0,"#F00")
	qitayanse.addColorStop(1,"#0f0")
	cxt.fiffStyle=qitayanse
	cxt.fillRect(0,0,175,50)
</script>-->
<h1>放大镜</h1>
<canvas id="canvas1" width="360px" height="360px" style="border:1px solid black">

</canvas>

<canvas id="canvas2" width="200px" height="200px" style="border:1px solid black">

</canvas>
<script type="text/javascript">
   function window_onload(){
	var canvas1=document.getElementById("canvas1")
	var context=canvas1.getContext("2d")
	var image=new Image();//定义一个image
	image.src="image/1.jpg";
	image.onload=function(){
	context.drawImage(image,0,0)
	}
	canvas1.onmousemove=canvas1_onmouse_move;
	}//图片先从服务器加载过来传过来，然后才能看
	function canvas2_onmouse_move(ev){
		///实现canvas2放大镜
		var canvas1,canvas2;
		var x,y;
		canvas1=document.getElementById("canvas1")
		canvas2=document.getElementById("canvas2")
		var context=canvas2.getContext("2d")
		//显示放大镜
		canvas2.style.display="inline";
		//清除放大镜中原来的内容
		context.clearRect(0,0,canvas2.width,canvas2.height);
		x=ev.pageX-canvas1.offsetLeft+2;//据水平方向页面边框的距离
		y=ev.pageY-canvas1.offsetTop+2;
		
		canvas2.style.left=(ev.pageX+2)+"px"//距离水平方向多大加上像素px
		canvas.style.top=(ev.pageY+2)+"px"
		
		var image=new Image();
		image.src="1(2).jpg";
		context.drawImage(image,x,y,200,200,0,0,400,400)
		}
</script>
<img src="image/1.jpg">
</body>
</html>
